<template>
	<el-card>
		<el-form>
			<el-button icon="el-icon-arrow-left" @click="backClick()">返回</el-button>
		</el-form>
		

		<!-- 班级卡片 -->
		<!-- 标题颜色 -->
		<el-card class="card-block" style="flex: 1;min-width: 550px;margin-right: 10px; color: #409EFF" header="学生图片列表" >
			<div style="display: flex;flex-wrap: wrap;">
				
				<div v-for="(item,index) in studentList" style="width: 100px;padding: 50px 80px;text-align: center;display: flex;justify-content: center;">
					<!-- 文字+图标 -->
					
					<div style="text-align: center; ">
						
						<!-- 图标颜色 图标的边框-->
						<div   @dblclick="linkToPhoto(item.id)"  
						style="color: #409EFF;
						display: flex; align-items: center;    
						justify-content: center;    
						width: 100px;height: 100px;border-radius: 8px;" >
						<img  :src="item.studentAvatar" style="
						height: 100%;
						width: 100%;
						border-radius: 50%;" />
						</div>
						<!-- 字体样式 -->
						<div style="color: #333;font-size: .875rem;font-weight: 400;line-height: 1.5715">
							{{item.kgName}}/{{item.className}}/{{item.studentName}}
						</div>

					</div>
					
				</div>
			</div>
		</el-card>
	</el-card>
</template>

<script>
	export default {

		data() {
			return {
				//搜索条件
				searchData: {
					studentName: null,
				},		
				//班级对应的学生列表
				studentList:[]
			};
		},
		mounted() {
			this.$nextTick(() => {
				//this.$refs.tableRef.shuaxin(this.searchData);
				this.getStudentList();
			});
		},
		methods: {
			

            //跳转至个人图片管理
			linkToPhoto(studentId){
				this.$router.push({
					path: '/photo',
					query:{
						studentId:studentId
					}
				})
			},

			//获取对应的学生列表
			getStudentList() {
                let studentName = this.$route.query.studentName
				this.$api.sysStudentFindBystuName(studentName).then(data => {
					this.studentList = data;
				}); 
			},

			//多级数据截取学生id
			handleChange(value) {

				let stuId = value[2];
				this.curData.studentId = stuId;	
			},
			//三级联动数据获取方法
			getKgClassStu(){
				this.$api.sysKgClassStuList().then(data => {	
					this.options = data; 
				});
			},	
			//搜索重置
			searchResize(data) {
				//this.$refs.tableRef.refreshSize(data)
			},

			

			//搜索按钮
			searchClick() {
				//this.$refs.tableRef.shuaxin(this.searchData)
			},
			//返回上一页
			backClick(){
				this.$router.back()
			},
		},
	};
</script>

<style lang="scss" scoped>
.card-block{
	margin-top: 20px;
}
</style>
